'use client';

type IconProps = {
  active?: boolean;
  size?: number;
};

export const HomeIcon = ({ active = false, size = 24 }: IconProps) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M3 9.5L12 4L21 9.5V20H15V13H9V20H3V9.5Z" 
      stroke={active ? 'currentColor' : '#999'} 
      strokeWidth="2" 
      fill={active ? 'currentColor' : 'none'}
      fillOpacity={active ? 0.2 : 0}
    />
  </svg>
);

export const VideoIcon = ({ active = false, size = 24 }: IconProps) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M4 6C4 4.89543 4.89543 4 6 4H14C15.1046 4 16 4.89543 16 6V14C16 15.1046 15.1046 16 14 16H6C4.89543 16 4 15.1046 4 14V6Z" 
      stroke={active ? 'currentColor' : '#999'} 
      strokeWidth="2" 
      fill={active ? 'currentColor' : 'none'}
      fillOpacity={active ? 0.2 : 0}
    />
    <path 
      d="M16 8L20 5V15L16 12" 
      stroke={active ? 'currentColor' : '#999'} 
      strokeWidth="2" 
      fill={active ? 'currentColor' : 'none'}
      fillOpacity={active ? 0.2 : 0}
    />
  </svg>
);

export const MessageIcon = ({ active = false, size = 24 }: IconProps) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M4 4H20V16H5.17L4 17.17V4ZM4 2C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2H4ZM6 12H18V14H6V12ZM6 9H18V11H6V9ZM6 6H18V8H6V6Z" 
      fill={active ? 'currentColor' : '#999'}
    />
  </svg>
);

export const UserIcon = ({ active = false, size = 24 }: IconProps) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" 
      fill={active ? 'currentColor' : '#999'}
    />
  </svg>
);